<template>
  <div>
    <a-result
      class="step-result"
      description="预计两小时内到账"
      status="success"
      title="操作成功"
    />
    <div class="information">
      <a-row :gutter="[16, 6]" justify="center">
        <a-col :span="3">付款账户：</a-col>
        <a-col :span="8">NaiveUiAdmin@163.com</a-col>
      </a-row>
      <a-row :gutter="[16, 6]" justify="center">
        <a-col :span="3">收款账户：</a-col>
        <a-col :span="8">xiaoma@qq.com</a-col>
      </a-row>
      <a-row :gutter="[16, 6]" justify="center">
        <a-col :span="3">收款姓名：</a-col>
        <a-col :span="8">啊俊</a-col>
      </a-row>
      <a-row :gutter="[16, 6]" justify="center">
        <a-col :span="3">转账金额：</a-col>
        <a-col :span="8">￥<span class="money">1280</span> 元</a-col>
      </a-row>
    </div>
    <div class="flex justify-center">
      <a-button class="mr-4" type="primary" @click="finish">再转一笔</a-button>
      <a-button @click="prevStep">查看账单</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const emit = defineEmits(['finish', 'prevStep']);

  function prevStep() {
    emit('prevStep');
  }

  function finish() {
    emit('finish');
  }
</script>

<style lang="less" scoped>
  .step-result {
    max-width: 560px;
    margin: 40px auto 0;

    :deep(.n-result-content) {
      background-color: #fafafa;
      padding: 24px 40px;
    }
  }

  .information {
    line-height: 22px;
    padding: 24px 0;
    background-color: #fafafa;
    margin-bottom: 24px;

    .ant-row:not(:last-child) {
      margin-bottom: 24px;
    }
  }

  .money {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 14px;
  }
</style>
